//处理element 样式 修改主题色
/**
 * 我们需要安装一下两个包
 * 1. rgb-hex:转换RGB(A)颜色为十六进制
 *   2. css-color-function:在CSS中提出的颜色函数的解析器和转换器
 *   3.然后还需要写入一个颜色转化计算器formula.json
 *   创建constants/formula.json (https://gist.github.com/benfrain/7545629)
 */

//导入我们创建的色值表
import formula from '@/constant/formula.json'
import color from 'css-color-function'
import rgbHex from 'rgb-hex'
import axios from 'axios'

/**
 * 把生成的样式表写入到style中
 */
export const writeNewStyle = newStyle => {
  //创建一个style标签  就我们写css的 style标签 
  const style = document.createElement('style')
  style.innerText = newStyle
  document.head.appendChild(style)
}

/**
 * 根据我们选择的主题色 生成最新的样式表
 *  
 */
export const generateNewStyle = async parimaryColor => {
  //1.根据主色生成值表 调用下面的generateColors方法
  const colors = generateColors(parimaryColor)
  //2.获取当前element-plus 的默认样式表 并且把需要进行替换的色值打上标记
  let cssText = await getOriginalstyle()
  // console.log(cssText);
  //3.遍历生成的色值表 在默认样式表中进行全局替换 得到的就是最新生成的样式表
  Object.keys(colors).forEach(item => {
    cssText = cssText.replace(
      //把所有的然后无论前面有多少空格包含了我们的item都进行全局替换 替换成我们当前处理好的colors里面的key值 'g'(全局匹配)
      new RegExp('(:|\\s+)' + item, 'g'),
      '$1' + colors[item]
    )
  })
  //return 出我们处理完成后的cssText
  return cssText
}

// 根据主色生成值表
export const generateColors = primary => {
  //判断存不存在primary 如果为假直接return 不往下执行
  if (!primary) return
  const colors = {
    primary
  }
  //遍历我们导入的色值表formula  Object.keys 遍历对象得到的值为一个数组 数组中的每一项都是原对象的key 
  //比如 let data = {a:1,b:2,c:3}  console.log(Object.keys(data)) 返回值为 ['a','b','c'] 对象的key组成的一个数组
  Object.keys(formula).forEach(item => {
    //在通过replace替换的方法 通过正则吧primary替换成我们传递过来的色值
    const value = formula[item].replace(/primary/g, primary)
    //再通过我们导入的包rgb-Hex 把颜色转换成16进制  通过rgbhex中的color.convert方法 把我们的value转换
    colors[item] = '#' + rgbHex(color.convert(value))
  })

  return colors
}

//获取element-plus的的默认样式表  找到elem官网  指南->安装->浏览器直接引入 第一个unpkg里的css链接复制 网页打开 
//element-plus 链接地址 https://unpkg.com/element-plus/dist/index.css
export const getOriginalstyle = async () => {
  //获取我们当前项目目录的element-plus的版本
  const version = require('element-plus/package.json').version
  const url = `https://unpkg.com/element-plus@${version}/dist/index.css`
  //获取到当前elementplus版本的url 再通过axios去请求 在去控制台复制请求结果 保存到我们的test.css文件中
  const { data } = await axios(url)
  return getStyleTemplate(data)
}

//把element-plus需要的替换的样式打上标记 这个data的形参是从上面的getOriginalstyle方法中传递的
const getStyleTemplate = data => {
  // element - plus 默认色值const  需要打打标机的
  const colorMap = {
    '#3a8ee6': 'shade-1',
    '#409eff': 'primary',
    '#53a8ff': 'light-1',
    '#66b1ff': 'light-2 ',
    '#79bbff': 'light-3',
    '#8cc5ff': 'light-4',
    '#acfff': 'light-5 ',
    '#b3d8ff': 'light-6',
    '#c6e2ff': 'light-7',
    '#d9ecff': 'light-8',
    '#ecf5ff': 'light-9'
  }

  Object.keys(colorMap).forEach(item => {
    //获取每一项的key值 这里的item等于 colorMap中的 #3a8ee6 #409eff

    //这里的value就是对应的每一项的key值 shade primary light-1 .....
    const value = colorMap[item]
    //再通过replace替换和正则的方法,并且忽略大小写  吧data所有的的key替换成value 我们得到的就是打上标记后的data  正则表达式中ig的意思是忽略大小写全局搜索
    //张晨  比如原来data中的 css是 --el-color:#3a8ee6 替换后就是--el-color:shade-1

    data = data.replace(new RegExp(item, 'ig'), value)
  })
  return data
}